<!--
 * @Author       : tongzonghua
 * @Date         : 2020-10-27 14:08:19
 * @LastEditors  : tongzonghua
 * @LastEditTime : 2020-10-27 14:45:24
 * @Email        : tongzonghua@360.cn
 * @Description  :
 * @FilePath     : /cli/aframe-boilerplate/1.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>
</head>

<body>
  <a-scene>
    <!-- <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4cc3d9"
      event-set__enter="_event: mouseenter; color: red; material.wireframe: true"
      event-set__down="_event: mousedown; color: red; material.wireframe: true"
      event-set__up="_event: mouseup; color: blue; material.wireframe: false"
      event-set__leave="_event: mouseleave; color: yellow; material.wireframe: false"></a-box>
    <a-camera>
      <a-cursor></a-cursor>
    </a-camera> -->
    <!-- <a-entity>
      <a-entity position="0 6 -10" geometry="primitive: sphere" material="color: red"></a-entity>
      <a-animation begin="2000" attribute="rotation" dur="5000" fill="forwards" to="0 0 360" repeat="indefinite"></a-animation>
    </a-entity> -->
    <!-- <a-entity position="0 6 -10" geometry="primitive: sphere" material="color: red"></a-entity> -->

    <a-assets>
      <img id="skyTexture" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
    </a-assets>
    <a-assets>
      <a-mixin id="red" material="color: red"></a-mixin>
      <a-mixin id="blue" material="color: blue"></a-mixin>
      <a-mixin id="cube" position="0 6 -10" geometry="primitive: box"></a-mixin>
    </a-assets>

    <a-entity mixin="red cube"></a-entity>
    <a-entity mixin="blue cube"></a-entity>

    <a-entity material="color: red" position="0 2 -10" geometry="primitive: box"></a-entity>
    <a-entity material="color: blue" geometry="primitive: box"></a-entity>

    <a-sky src="#skyTexture"></a-sky>
  </a-scene>
</body>

</html>